<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <link rel="stylesheet" href="CSS/login.css">
</head>
<body>
    <div id="all">
        <div id="center">
            <div id="logo"></div>
            <div class="item">
                <label for="input1">邮箱</label>
                <input type="text" id="input1">
                <span class="iconfont">&#x3448;</span>
            </div>
            <div class="item">
                <label for="input2">密码</label>
                <input type="password" id="input2">
                <span class="iconfont">&#xeb46;</span>
                <span class="iconfont" id="close">&#xeb45;</span>
            </div>
            <div class="item">
                <label for="input3">验证码</label>
                <input type="text" id="input3">
                <span class="iconfont">&#xe60d;</span>
            </div>
            <div id="bottom">
                <div id="bl">
                    <img src="images/captcha.svg">
                    <span class="iconfont">&#xf015c;</span>
                </div>
                <div id="br">
                    <button>注册</button>
                    <button>登录</button>
                </div>
            </div>
            <a href="#">忘记密码？</a>
        </div>
    </div>

    <script>
        $(".item>input").focus(function(){
            $(this).css({borderBottom:"2px solid #5365BE"})
            $(this).prev().css({color:"#5365BE",fontSize:"12px",top:"-13px"})
        }).blur(function(){
            $(this).css({borderBottom:"1px solid #828589"})
            $(this).prev().css({color:"#828589",fontSize:"15px",top:"5px"})
            if($(this).val() != ""){
                $(this).css({borderBottom:"2px solid #5365BE"})
                $(this).prev().css({color:"#5365BE",fontSize:"12px",top:"-13px"})
            }
        })
        // .mouseover(function(){
        //     $(this).css({borderBottom:"2px solid black"})
        // }).mouseout(function(){
        //     $(this).css({borderBottom:"1px solid #828589"})
        // })

        $(".item>input").first().focus(function(){
            $(this).attr({placeholder:"Email"})
        }).blur(function(){
            $(this).attr({placeholder:""})
        })
        
        $(".item>.iconfont").eq(1).click(function(){
            $(this).hide();
            $(this).next().show();
            $(this).prev().attr({type:"text"});
        })
        $(".item>.iconfont").eq(2).click(function(){
            $(this).hide();
            $(this).prev().show();
            $(this).prev().prev().attr({type:"password"});
        })

    </script>
</body>
</html>